<template>
	<div>
		<div class="music-box" v-show="songList.length > 0">
			<audio :src="Songurl" controls ref="audio">
			</audio>
			<div class="music-item" @click="isShowList = !isShowList">
				<div class="img" :class="{active: playing}"><img :src="imgUrl"></div>
				<div class="name"><span>{{ curSong.name }}</span> - {{ curSong.singer }}</div>
				<div class="button">
					<span class="pause" v-show="!playing" @click.stop="tapButton"></span>
					<span class="play" v-show="playing" @click.stop="tapButton"></span>
				</div>
			</div>
			<ul class="play-list" :class="{active: isShowList}">
				<p class="list-nav"><i @click.stop="isShowList = false">>></i> 播放列表 <span @click="clearList">清空</span></p>
				<li v-for="(item, i) in songList" :class="{ active: item.mid == curSong.mid }" :key="i" @click="playCurMusic(i)">
					<i class="num">{{ i + 1 }}</i>
					<div class="con">
						<p class="title">{{ item.name }}</p>
						<p class="singer">{{ item.singer }}</p>
					</div>
					<span class="del" @click.stop="delCurItem(i)"><i>X</i></span>
				</li>
			</ul>
		</div>
		<footer class="foot" v-show="!songList.length">
			<p>copyright <a href="https://www.cnblogs.com/mrzll/">@前端MRZHU</a></p>
		</footer>
	</div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
	name: 'music',
	data() {
		return {
			timer: null,
			mIndex: 0,
			isShowList: false,
			Songurl: null,
			imgUrl: null,
		}
	},
	methods: {
		tapButton() {
			this.playing ? this.pause() : this.play()
		},
		...mapMutations([
			'play', 'pause', 'changeIndex', 'playAllList'
		]),
		playCurMusic(index) {
			this.pause()
			this.changeIndex(index)
			this.mIndex = index;
		},

		delCurItem(index) {
			this.pause()
			let newArr = [...this.songList];
			newArr.splice(index, 1)
			this.playAllList(newArr);
		},

		clearList() {
			this.playAllList([]);
		}
	},
	computed:{
		...mapState({
			playing: state => state.Play.playing,
			songList: state => state.Play.playList,
			curIndex: state => state.Play.curIndex,
		}),

		...mapGetters([
	      	'curSong', 'curListLen'
	    ]),
	   
	},
	watch: {
		playing(val) {
			if(val) {
				clearInterval(this.timer)
				this.$refs.audio.play();
				this.timer = setInterval(()=>{
					if(this.$refs.audio.ended) {
						clearInterval(this.timer);
						this.mIndex++;
						if(this.mIndex >= this.curListLen) {
							this.mIndex = 0
						};
						this.pause()
						this.changeIndex(this.mIndex)
					}
				}, 1000)
			} else {
				this.$refs.audio.pause()
			}
		},

		curSong() {
			this.$store.dispatch('getMusic', this.curSong.mid).then((res) => {
	        	this.Songurl = res.data.data
	  			setTimeout(()=> {
	  				this.play()
	  			}, 1000)
	      	})
	      	this.$store.dispatch('getMusicImg', this.curSong.mid).then((res) => {
	        	this.imgUrl = res.data.data
	      	})
		}
	}
}
</script>

<style lang="stylus">
audio 
	visibility hidden
.music-box
	position fixed 
	left 0 
	bottom 0 
	width 100% 
	height 60px 
	z-index 999
.play-list
	position fixed 
	width 200px
	height calc(100% - 60px)
	top 0px	
	right -200px
	transition all .2s
	background-color rgba(0,0,0,.8)
	overflow hidden
	overflow-y auto
	&.active 
		right 0
	.list-nav
		text-align center
		position relative
		color #fff 
		line-height 40px 
		border-bottom 1px solid #eee
		i 
			position absolute
			width 40px 
			height 40px 
			text-align center
			font-size 20px 
			left 0px
			top 0px
			font-style normal
			letter-spacing -2px
		span 
			float right
			padding 0 8px
			font-size 12px
	li 
		padding 10px
		color #fff
		white-space nowrap
		font-size 14px
		position relative
		&.active 
			background-color rgba(0,0,0,.6)
			.con .title 
				color #00dc3b
		& > * 
			display inline-block
			vertical-align middle
			font-style normal
		.num 
			 margin-right 8px
		.con 
			max-width 130px
			overflow hidden
			.title
				white-space nowrap
				text-overflow ellipsis
				overflow hidden
			.singer
				color #999
				font-size 12px
				margin-top 5px
				white-space nowrap
				text-overflow ellipsis
				overflow hidden
		.del
			position absolute
			right 0px
			width 50px
			height 30px
			line-height 30px
			top 10px
			text-align center
			i
				font-style normal
			
.music-item
	width 100%
	height 100% 
	position absolute 
	left 0px
	top 0px
	padding 10px 20px 
	box-sizing border-box
	background-color #fff
	box-shadow 0 -1px 10px 0 rgba(0,0,0,.05)
	.img 
		float left 
		height 40px
		width 40px 
		border-radius 50% 
		overflow hidden  
		margin-right 10px 
		animation rotates 3s linear infinite paused
		&.active 
			animation-play-state running
		img 
			width 100% 
			height 100%
	.name 
		overflow hidden 
		height 40px 
		line-height 40px 
		margin-right 30px
		span 
			display inline-block
			max-width 150px 
			vertical-align bottom 
			height 100% 
			white-space nowrap
			overflow hidden 
			text-overflow ellipsis
	.button 
		position absolute 
		right 20px 
		top 0
		width 20px 
		height 100% 
		line-height 60px 
		font-size 0
		span 
			display inline-block
			width 100%
			height 20px 
			vertical-align middle
			&.play 
				width 18px
				border-left 4px solid #333
				border-right 4px solid #333
			&.pause 
				border none 
				border-left 15px solid #333 
				border-top 10px solid transparent
				border-bottom 10px solid transparent
footer 
	background-color #333				
	padding 0 10px 
	text-align center
	line-height 60px 
	color #eee
@keyframes rotates 
	0% 
		transform rotate(0)	
	100% 
		transform rotate(360deg)			
</style>